<template>
  <view class="todo-item" :class="{ done: item.done }">
    <text class="checkbox" @click="toggleDone">{{ item.done ? '✓' : '□' }}</text>
    <text class="content">{{ item.content }}</text>
    <text class="priority" :style="{ color: priorityColor }" @click="changePriority">{{ item.priority }}</text>
    <text class="delete" @click="deleteTodo">×</text>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    priorityColor() {
      switch (this.item.priority) {
        case '高': return 'red';
        case '中': return 'orange';
        case '低': return 'green';
        default: return 'black';
      }
    }
  },
  methods: {
    toggleDone() {
      this.$emit('toggleDone')
    },
    deleteTodo() {
      this.$emit('deleteTodo')
    },
    changePriority() {
      // 显示优先级选择菜单
      const priorities = ['高', '中', '低']
      const currentIndex = priorities.indexOf(this.item.priority)
      // 排除当前优先级，创建可选择的优先级列表
      const availablePriorities = priorities.filter((p, index) => index !== currentIndex)
      
      uni.showActionSheet({
        itemList: availablePriorities,
        success: (res) => {
          // 根据点击索引获取新的优先级
          const newPriority = availablePriorities[res.tapIndex]
          // 直接修改item对象，然后通知父组件更新
          this.item.priority = newPriority
          this.$emit('update')
        }
      })
    }
  }
}
</script>

<style scoped>
.todo-item {
  display: flex;
  align-items: center;
  padding: 15rpx;
  border-bottom: 1px solid #eee;
}
.done .content {
  text-decoration: line-through;
  color: #999;
}
.checkbox {
  width: 40rpx;
  text-align: center;
}
.content {
  flex: 1;
  margin: 0 20rpx;
}
.priority {
  width: 60rpx;
  text-align: center;
}
.delete {
  color: #ff4444;
  font-size: 32rpx;
}
</style>